import React, { Component } from 'react'
import './register.less'
import { connect } from 'react-redux'
import action from '../../store/action'
import { Dialog } from 'antd-mobile'
class register extends Component {
    state = {
        user: '',
        pass: '',
        Okpass: '',
        flag: false,
        str: ''
    }
    register = () => {
        let reg = /^\d{11}$/;
        var mi = /^[a-z0-9]{6,20}$/i;
        let raults = this.props.login.User.some(item => this.state.user === item.user)
        if (!reg.test(this.state.user)) {
            this.setState({ str: '手机号格式错误' })
            this.setState({ flag: true })
        } else if (raults) {
            this.setState({ str: '该手机号已被注册' })
            this.setState({ flag: true })
        } else if (!mi.test(this.state.pass)) {
            this.setState({ str: '密码为6~10位字母、数字组合' })
            this.setState({ flag: true })
        } else if (this.state.Okpass !== this.state.pass) {
            this.setState({ str: '两次输入密码不同' })
            this.setState({ flag: true })
        } else {
            console.log('注册成功');
            this.setState({ flag: false })
            console.log(this.props);
            this.props.Register({
                user: this.state.user,
                pass: this.state.pass
            })
            Dialog.alert({
                content: '注册成功',
                onConfirm: () => {
                    console.log('Confirmed')
                },
            })
            this.props.history.push('/login')
        }
    }
    componentDidMount() {
        this.props.getUser()
        console.log(this.props.login.User);
    }
    render() {
        return (
            <div className="register">
                <div className="Login_top">
                    <p>x</p>
                    <h2>账号注册</h2>
                </div>
                <div className="inp">
                    <p><input type="text" placeholder="手机/用户名" value={this.state.user} onChange={(e) => {
                        this.setState({ user: e.target.value })
                    }} /></p>
                    <p><input type="password" placeholder="密码" value={this.state.pass} onChange={(e) => {
                        this.setState({ pass: e.target.value })
                    }} /></p>
                    <p><input type="password" placeholder="确认密码" value={this.state.Okpass} onChange={(e) => {
                        this.setState({ Okpass: e.target.value })
                    }} /></p>
                </div>
                {
                    this.state.flag ? <div className="Ts">
                        {this.state.str}
                    </div> : null
                }
                <div className="btn">
                    <button disabled={this.state.user && this.state.pass && this.state.Okpass ? false : true} onClick={() => {
                        this.register()
                    }}>注册</button>
                </div>
                <div className="zc">
                    已有账号？<span onClick={() => {
                        this.props.history.push('/login')
                    }}>登录</span>
                </div>
            </div>
        )
    }
}
export default connect(state => state, action.login)(register)
